<template>
	<s-layout title="数据统计">
		<view class="heard">
			<view class="amount-box">
				<view class="amount">
					￥{{state.info.ljcj}}
				</view>
				<view>累计成交额</view>
			</view>
		</view>
		<view class="s-card ontop" @click="toNext('/manage/pages/statistics/turnover')">
			<view class="title">
				<text>成交额(元)</text>
				<uni-icons type="right" size="16"/>
			</view>
			<view class="s-card-content">
				<view>
					<text class="num">{{state.info.jrcj}}</text>
					<text>今日</text>
				</view>
				<view>
					<text class="num">{{state.info.zrcj}}</text>
					<text>昨日</text>
				</view>
				<view>
					<image class="statistics-img" src="../../static/s-turnover.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="s-card" @click="toNext('/manage/pages/statistics/order')">
			<view class="title">
				<text>付款订单数(个)</text>
				<uni-icons type="right" size="16"/>
			</view>
			<view class="s-card-content">
				<view>
					<text class="num">{{state.info.jrfkdds}}</text>
					<text>今日</text>
				</view>
				<view>
					<text class="num">{{state.info.zrfkdds}}</text>
					<text>昨日</text>
				</view>
				<view>
					<image class="statistics-img" src="../../static/s-order.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="s-card" @click="toNext('/manage/pages/statistics/goods')">
			<view class="title">
				<text>付款商品数(个)</text>
				<uni-icons type="right" size="16"/>
			</view>
			<view class="s-card-content">
				<view>
					<text class="num">{{state.info.jrfksps}}</text>
					<text>今日</text>
				</view>
				<view>
					<text class="num">{{state.info.zrfksps}}</text>
					<text>昨日</text>
				</view>
				<view>
					<image class="statistics-img" src="../../static/s-goods.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="s-card" @click="toNext('/manage/pages/statistics/member')">
			<view class="title">
				<text>付款会员数</text>
				<uni-icons type="right" size="16"/>
			</view>
			<view class="s-card-content">
				<view>
					<text class="num">{{state.info.jrfkhys}}</text>
					<text>今日</text>
				</view>
				<view>
					<text class="num">{{state.info.zrfkhys}}</text>
					<text>昨日</text>
				</view>
				<view>
					<image class="statistics-img" src="../../static/s-member.png" mode=""></image>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import sheep from '@/sheep';

	const state = reactive({
    info: {}
	})

  async function getInfo() {
    const res = await sheep.$mapi.statistics.statisticsData();
    if (!res.code) return;
    state.info = res.data;
  }

	function toNext(path) {
		sheep.$router.go(path);
	}

	onLoad((options) => {
    getInfo();
	});
</script>

<style lang="scss" scoped>
	.heard {
		padding: 28rpx;
		padding-bottom: 100rpx;
		position: relative;
		background: linear-gradient(117deg, #70C6FF 0%, #383FFF 100%);
		color: #fff;
		text-align: center;

		&::after {
			position: absolute;
			left: 0;
			bottom: 0;
			content: "";
			width: 100%;
			height: 20%;
			background: linear-gradient(to bottom, transparent, #F7F7F7);
			opacity: 0.7;
		}

		.amount-box {
			font-weight: 400;
			font-size: 28rpx;
			margin: 80rpx 0;
		}

		.amount {
			font-weight: 800;
			font-size: 48rpx;
			margin-bottom: 15rpx;
		}
	}

	.ontop {
		position: relative;
		z-index: 99;
		padding: 0 28rpx;
		margin-top: -100rpx !important;
	}

	.s-card {
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 28rpx;
		padding: 28rpx;

		.title {
			position: relative;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			padding-left: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&::before {
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				content: "";
				width: 8rpx;
				height: 32rpx;
				background: #3A43FF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
			}
		}

		.s-card-content {
			display: flex;
			justify-content: space-between;
			margin-top: 10rpx;

			>view {
				margin: 20rpx 0;
				// width: 33.33%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 25rpx;
				color: #6f6f6f;

				.num {
					font-weight: 500;
					font-size: 40rpx;
					color: #333333;
					margin-bottom: 18rpx;
				}
				.statistics-img{
					width: 118rpx;
					height: 118rpx;
				}
			}
		}
	}
</style>
